<template>
  <div class="addList">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      :labelWidth="labelWidth"
      class="demo-ruleForm"
    >
      <!-- 基本信息 -->
      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">基本信息</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="门店人员账号/服务人员姓名" prop="personName">
              <el-input
                v-model="ruleForm.personName"
                :disabled="typeof ruleForm.id === 'number'"
                placeholder="门店人员输入数字 / 服务人员输入姓名"
                :maxLength="15"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="性别">
              <el-radio-group v-model="ruleForm.sex">
                <el-radio :label="'00'">男</el-radio>
                <el-radio :label="'01'">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :xs="8">
            <el-form-item label="联系电话" prop="phoneNum">
              <el-input
                v-model="ruleForm.phoneNum"
                :disabled="typeof ruleForm.id === 'number'"
                placeholder="请输入联系电话"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="涉及业态" prop="industryId">
              <el-checkbox-group
                v-model="ruleForm.industryId"
                @change="industryIdChange"
                :disabled="typeof ruleForm.id === 'number'"
              >
                <el-checkbox
                  v-for="(item, index) in yetaiList"
                  :label="item.value"
                  :key="index"
                  >{{ item.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col
            :xs="8"
            v-if="
              ruleForm.industryId.some((item) => {
                return item == '04';
              })
            "
          >
            <el-form-item label="家政类别" prop="householdType1">
              <el-select
                v-model="ruleForm.householdType1"
                placeholder="请选择家政类别"
                style="width: 100%"
                multiple
                @change="$forceUpdate()"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in householdTypeList"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="8">
            <el-form-item label="门店区域">
              <el-col :span="8">
                <el-form-item label="省">
                  <el-input v-model="form.provinceCode" @blur="quYuBlur"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="市">
                  <el-input v-model="form.cityCode" @blur="quYuBlur"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="区">
                  <el-input v-model="form.districtCode" @blur="quYuBlur"></el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>-->
          <el-col :xs="8">
            <el-form-item label="绑定门店" prop="shopId">
              <el-select
                v-model="ruleForm.shopId"
                placeholder="请选择需要绑定的门店"
                style="width: 100%"
                @change="shopChange"
                filterable
                :disabled="typeof ruleForm.id === 'number'"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in shopList"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- <el-col :xs="8">
            <el-form-item label="佣金规则" prop="commissionId">
              <el-select
                v-model="ruleForm.commissionId"
                placeholder="请选择佣金规则"
                style="width: 100%"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in fenrunList"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :xs="8">
            <el-form-item label="状态">
              <el-radio-group v-model="ruleForm.state">
                <el-radio
                  :label="item.value"
                  v-for="item in zhuangtaiList"
                  :key="item.value"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="是否为店长">
              <el-radio-group v-model="ruleForm.isShopowner">
                <el-radio
                  :label="item.value"
                  v-for="item in isShopownerList"
                  :key="item.value"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="身份证正面照片" prop="idCardFront">
              <el-upload
                :headers="headers"
                :show-file-list="false"
                :on-success="handleAvatarSuccessIdCardFront"
                class="avatar-uploader"
                action="/admin/sys-file/upload"
              >
                <img
                  v-if="ruleForm.idCardFront"
                  id="idCardFront"
                  :src="ruleForm.idCardFront"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="身份证背面照片" prop="idCardBack">
              <el-upload
                :headers="headers"
                :show-file-list="false"
                :on-success="handleAvatarSuccessIdCardBck"
                class="avatar-uploader"
                action="/admin/sys-file/upload"
              >
                <img
                  v-if="ruleForm.idCardBack"
                  id="idCardBack"
                  :src="ruleForm.idCardBack"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <!-- 银行账号 -->
      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">银行账号</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="账户户名" prop="bankCardAccount">
              <el-input
                v-model="ruleForm.bankCardAccount"
                placeholder="请输入账户户名"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="银行账号" prop="bankCardNo">
              <el-input
                v-model="ruleForm.bankCardNo"
                placeholder="请输入银行账号"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="开户行" prop="originalBank">
              <el-input
                v-model="ruleForm.originalBank"
                placeholder="请输入开户行"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>
    </el-form>
  </div>
</template>

<script>
import comTitle from "@/views/com/com_title.vue";
import {
  getFenrunList,
  pageByyt,
  getShopList,
  getPlatformShopInfo,
} from "@/api/shop/servicer/list.js";
import { isMobile, isBankCardNo } from "@/util/validate.js";
import store from "@/store";

export default {
  components: {
    comTitle,
  },
  data() {
    var validPhone = (rule, value, callback) => {
      console.log(value);
      if (!value) {
        callback(new Error("请输入电话号码"));
      } else if (!isMobile(value)) {
        callback(new Error("请输入正确的11位手机号码"));
      } else {
        callback();
      }
    };
    var validBankCardNo = (rule, value, callback) => {
      console.log(value);
      if (!value) {
        callback(new Error("请输入银行卡号"));
      } else if (!isBankCardNo(value)) {
        callback(new Error("请输入正确的19位银行卡号"));
      } else {
        callback();
      }
    };
    var validPersonName = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入门店人员账号/服务人员姓名"));
      } else if (isNaN(value)) {
        callback(new Error("必须是数字"));
      } else if ((value + "").length < 6) {
        callback(new Error("长度最少6位"));
      } else if (11 < (value + "").length) {
        callback(new Error("长度最多11位"));
      } else {
        callback();
      }
    };
    return {
      headers: {
        Authorization: "Bearer " + store.getters.access_token,
      },
      labelWidth: "195px",
      fenrunList: [],
      shopList: [],
      ruleForm: {
        sex: "00",
        industryId: [], //业态
        state: "01",
        isShopowner: "00",
        idCardFront: "",
        idCardBack: "",
        householdType1: [],
      },

      form: {}, //省市区
      isShopownerList: [
        {
          label: "普通店员",
          value: "00",
        },
        {
          label: "店长",
          value: "01",
        },
        {
          label: "可接单服务人员",
          value: "02",
        },
      ],
      rules: {
        personName: [
          {
            required: true,
            message: "请输入门店人员账号 / 服务人员姓名",
            trigger: "blur",
            // validator: validPersonName,
            // type: 'number',
          },
        ],
        companyAdress: [
          { required: true, message: "请输入公司地址", trigger: "change" },
        ],
        contacts: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        commissionId: [
          { required: true, message: "请选择佣金规则", trigger: "change" },
        ],
        householdType1: [
          { required: true, message: "请选择家政类别", trigger: "change" },
        ],
        idCardFront: [
          {
            required: true,
            message: "请上传身份证正面照片",
          },
        ],
        idCardBack: [
          {
            required: true,
            message: "请上传身份证背面照片",
          },
        ],
        phoneNum: [
          {
            required: true,
            // message: "请输入联系电话",
            validator: validPhone,
            trigger: "blur",
          },
        ],
        bankCardNo: [
          {
            required: true,
            // validator: validBankCardNo,
            message: "请输入银行卡号",
            trigger: "blur",
          },
        ],
        businessType: [
          { required: true, message: "请选择涉及业态", trigger: "change" },
        ],
        shopId: [
          { required: true, message: "请选择绑定门店", trigger: "change" },
        ],
        bankCardAccount: [
          { required: true, message: "请输入账户户名", trigger: "blur" },
        ],
        originalBank: [
          { required: true, message: "请输入开户行", trigger: "blur" },
        ],
      },
      yetaiList: [
        //业态
        // {
        //   label: "全部业务",
        //   value: "01",
        // },
        {
          label: "商超",
          value: "02",
        },
        {
          label: "洗衣",
          value: "03",
        },
        {
          label: "家政",
          value: "04",
        },
        {
          label: "咖吧",
          value: "05",
        },
      ],
      householdTypeList: [
        {
          label: "日式保洁",
          value: "00",
        },
        {
          label: "做饭保姆",
          value: "01",
        },
        {
          label: "星级月嫂",
          value: "02",
        },
        {
          label: "全屋收纳",
          value: "03",
        },
      ],
      zhuangtaiList: [
        //状态
        {
          label: "提供服务",
          value: "01",
        },
        {
          label: "停止服务",
          value: "00",
        },
      ],
    };
  },
  mounted() {
    this.getFenrun();
  },
  methods: {
    getFenrun() {
      getFenrunList(Object.assign({ profitRuleType: "00" })).then((val) => {
        this.fenrunList = val.data.data.records.map((item) => {
          return {
            label: item.profitRuleName,
            value: item.profitRuleId,
          };
        });
      });
      getPlatformShopInfo().then((val) => {
        console.log(val);
        let data = val.data.data;
        this.shopStoreList = data;
        this.shopList = data.map((item) => {
          return {
            label:
              (item.provinceCode ? item.provinceCode : "") +
              (item.cityCode ? item.cityCode : "") +
              (item.districtCode ? item.districtCode : "") +
              " - " +
              item.shopName,
            value: item.shopId,
          };
        });
      });
    },
    industryIdChange(e) {
      let list = [...e];
      let obj = e.join(",");
      // this.ruleForm.shopId = "";
      console.log(list.length);
      if (list.length) {
        getPlatformShopInfo({
          businessType: obj,
          state: new Date(),
        }).then((val) => {
          console.log(val);
          let data = val.data.data;
          this.shopList = data.map((item) => {
            return {
              label:
                (item.provinceCode ? item.provinceCode : "") +
                (item.cityCode ? item.cityCode : "") +
                (item.districtCode ? item.districtCode : "") +
                " - " +
                item.shopName,
              value: item.shopId,
            };
          });
          if (this.ruleForm.id) {
            console.log("编辑", this.ruleForm);
            this.shopChange(this.ruleForm.shopId);
            if (!this.ruleForm.idCardFront) {
              this.ruleForm.idCardFront = "";
            }
            if (!this.ruleForm.idCardBack) {
              this.ruleForm.idCardBack = "";
            }
          }
        });
      } else {
        this.ruleForm.shopId = "";
        this.shopList = [];
      }

      this.$forceUpdate();
    },
    quYuBlur() {
      //省市关联
      getShopList(this.form).then((val) => {
        console.log(val);
        let data = val.data.data;
        this.shopList = data.records.map((item) => {
          return {
            label: item.shopName,
            value: item.shopId,
          };
        });
      });
    },

    shopChange(e) {
      console.log(this.shopStoreList);
      if (this.shopStoreList) {
        if (this.shopStoreList.length) {
          this.shopStoreList.forEach((item) => {
            if (e == item.shopId) {
              console.log("123123", item);
              this.ruleForm.deptId = item.deptId;
              this.ruleForm.shopownerId = item.personId;
            }
          });
          this.$forceUpdate();
        }
      }
    },
    handleAvatarSuccessIdCardFront(res, file) {
      this.ruleForm.idCardFront = res.data.url;
      this.$refs.ruleForm.validateField("idCardFront");
    },
    handleAvatarSuccessIdCardBck(res, file) {
      this.ruleForm.idCardBack = res.data.url;
      this.$refs.ruleForm.validateField("idCardBack");
    },
  },
};
</script>

<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px !important;
  color: #8c939d !important;
  width: 178px !important;
  height: 178px !important;
  line-height: 178px !important;
  text-align: center !important;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>